<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>アイテム入れ替え</title>
<link href="../jQuery/css/jquery-ui.css" rel="stylesheet" type="text/css" />
<style>
.sortable {
	list-style-type: none;
	margin: 0;
	padding: 0;
	width: 700px;
}

.sortable li {
	margin: 3px 3px 3px 0;
	padding: 5px;
	float: left;
	width: 120px;
	height: 150px;
	font-size: 1em;
	text-align: left;
	background: url(../images/noPic.jpg) no-repeat center center;
}

.sortable div {
	background-color:white;
}

.sortable div img {
	/* イメージの透過色対策 */
	max-width: 100px;
	max-height: 100px;
}

</style>
<script src="../jQuery/js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="../jQuery/js/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>
<script>
	$(function() {
		
		// 初期は折りたたむ
		$("#sortable2").slideToggle(0);
		
		$("#button-open").click(function(){
			// ボタンアクションでslide up/downするように
			$("#sortable2").slideToggle();
			
			if($(this).hasClass("open")){
				$(this).removeClass("open").addClass("close").text("open");
			} else {
				$(this).removeClass("close").addClass("open").text("close");
			}
		});
		
		var sortable1 = $("ul[id^='sortable'] > li").sortable({
			connectWith : 'li',
			placeholder : 'ui-state-highlight',
			forcePlaceholderSize : 'true', // TODO 少し格好悪い
			revert : 300, // 要素の吸着にアニメーション（時間）をかける
			opacity:0.7,
		}).disableSelection();
		
		// TODO すでにイメージが置いてあるセルにドロップしたら交換。
		$("ul[id^='sortable']").bind('sortstop', function(event, ui) {
			
			//console.log(event.target);
			
			sortable1.sortable('wiget').each(function(){
				
				// すでにイメージが置いてあるセルにはドロップできなくする。
				if($(this).find('img').length > 1){
					sortable1.sortable('cancel');
					
					console.log(ui.item.html());
					return false;
				}
			});
		});
	});
</script>
</head>
<body>
	<h2>イメージ入れ替え（list）</h2>
	<p>D&amp;Dで要素が移動できる。枠固定版</p>
	<button id="button-open">open</button>
	<ul id="sortable1" class="sortable">
		<li class="ui-state-default">1<div class="image-set"><img id="pic001" src="../images/ikd.jpg" /><br />ikd.jpg<br /></div></li>
		<li class="ui-state-default">2<div class="image-set"><img id="pic002" src="../images/kuma.gif" /><br />kuma.gif</div></li>
		<li class="ui-state-default">3</li>
		<li class="ui-state-default">4</li>
		<li class="ui-state-default">5</li>
	</ul>
	<ul id="sortable2" class="sortable">
		<li class="ui-state-default">6</li>
		<li class="ui-state-default">7</li>
		<li class="ui-state-default">8</li>
		<li class="ui-state-default">9</li>
		<li class="ui-state-default">10</li>
		<li class="ui-state-default">11</li>
		<li class="ui-state-default">12</li>
		<li class="ui-state-default">13</li>
		<li class="ui-state-default">14</li>
		<li class="ui-state-default">15</li>
	</ul>
	<div style="clear: both"></div>
</body>
</html>